<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据的绑定</title>
		<style type="text/css">
			#app{
				
				width: 200px;
				height: 200px;
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- v-model 数据双向数据的绑定 用的最多的
			               只能标识可以编辑的标签
						   1.数据与页面绑定，数据变化，则数据同步变化
						   2.页面与数据绑定，页面变化，则数据同步修改
						   -->
			数据录入:<input type="text" v-model="msg" value="123" />
			
			
			<!-- <h1 v-text="msg"></h1> -->
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script type="text/javascript">
			
		const app=new Vue({
			
			el: '#app',
			data: {
				msg: '双向数据的绑定'
				
			}
			
		})	
			
		</script>
		
	</body>
</html>
